import React, { PureComponent } from 'react';
import { Form, Row, Col, DatePicker, Input, Button, Timeline } from 'antd';
import moment from 'moment';
import styles from './index.less';

export default class Index extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            mode: 'list'
        }
    }

    componentDidMount() {
        const { dispatch, modularName, currentUnit } = this.props;

        dispatch({
            type: `${modularName}/queryEventPush`,
            payload: {
                pushUnitId: currentUnit.id,
                callback: (data) => {
                    this.setState({ list: [...data] })
                }
            }
        });
    }

    render() {
        const { list = [] } = this.state;

        return (
            <div>
                {list && list.length > 0 &&
                    <Timeline>
                        {list.map(item => {
                            const { unit_id = {}, eventId = {} } = item;

                            return (
                                <Timeline.Item color='#e4e7ed'>
                                    <div style={{ color: '#909399', marginBottom: 8 }}>
                                        {item.pushTime}
                                    </div>
                                    <div className={styles.process_item_card} style={{ color: 'rgb(51, 51, 51)', fontSize: 16, padding: 20, position: 'relative' }}>
                                        <div style={{ color: 'rgb(43, 151, 239)', fontSize: 14, marginBottom: 8 }}>
                                            送报单位：{unit_id.unit_name}
                                        </div>
                                        <div style={{ fontSize: 15 }}>
                                            送报内容：{eventId.eventBrief}
                                        </div>
                                    </div>
                                </Timeline.Item>
                            );
                        })}
                    </Timeline>
                }
            </div>
        );
    }
}